<style lang="scss" scoped>
    .teach_exam{
        min-height: calc(100vh - 80px);
        background-color: #fff;
        background-image:url('~@/assets/teacher-bg.jpg');
        background-repeat: no-repeat;
        background-position-y: bottom;
        background-size: 100%;
    }
    .ml-300{
        margin-left: 300px;
    }
    .sub-btn{
        color: #fff;
        background-color: #A8A8A8;
        &:hover{
            border-color: #A8A8A8;
        }
    }
    .problems-list {
        height: 282px;
        overflow-y: auto;
        .item{
            transition:box-shadow 1s;
            float: left;
            // margin-left: 2%;
            margin-right: 2%;
            width: 23%;
            overflow: hidden;
            span{
                width: 50px;
                margin-left: 3px;
                display: inline-block;
            }
            .progress{
                width: 100px;
            }
        }
        .skip{
            animation: remind .8s;
            animation-iteration-count: infinite;
        }
    }
    .remind-text{
        color: $error-color;
    }
    @keyframes remind{
        from { box-shadow:0 0 1px 1px #fff;}
        to { box-shadow:0 0 5px 1px  $error-color; }
    }
    .answerList .item{
        width:23%;
        overflow: hidden;
        &::before{
            content: "";
            width: 13px;
            height: 100%;
            float: left;
            margin-right: 10px;
        }
        span{
            width:60%;
        }
        &::before{
            background-color: #5CBCFF;
        }
        &.sex0::before{
            background-color: #FF7474;
        }
        i{
            line-height: 26px;
            font-weight: bold;
        }
    }
    .step li{
        color: #fff;
        background:$content-color;
        width:24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        cursor: pointer;
        border-radius: 50%;
        &.active{
            background:$primary-color;
        }
    }
    .not-submit .list{
        p{
            width:156px;
            line-height: 30px;
            margin: 0 14px 14px 0 ;
            padding:0 6px;
            border-radius: 3px;
        }
        p.sex1{
            border-left:6px solid  #FF7474;
        }
        p.sex0{
            border-left:6px solid  #5CBCFF;
        }
    }
</style>
<template>
    <div class="teach_exam py-2 border-radius">
        <div v-if="!~currentIndex">
            <h4 class="block-title">{{content.title}}</h4>
            <div class="mt-1 p-2">
                <div class="desp w-100b" style="word-break:break-all" v-html="content.content"></div>
                <div class="mt-2" v-if="content.file_list.length">
                    <span class="mr-1"> 附件列表：</span>
                    <download-list :file_list="content.file_list"/>
                </div>
                <div class="mt-4">
                    <Button class="mr-1" @click="next_problems(0)"  type="primary" size="large">开始讲解</Button>
                    <Button size="large" class="sub-btn" @click="examStateShow=true;open_exam_state">查看答题情况</Button>
                </div>
            </div>
        </div>
        <div class="problems" v-else>
            <div class="d-flex line-height-26">
                <h4 class="block-title mr-1" :class="'t'+currentProblems.type">No.{{currentIndex+1+' '+currentProblems.typeName}}题 ({{currentProblems.score}}分)</h4>
                <span class="color-666 mr-2">题目编号：{{currentProblems.no}}</span>
                <span class="color-red" v-if="currentProblems.limit_time">限时 {{currentProblems.limit_time}}分钟</span>
                <Button class="ml-4" @click="examStateShow=true;open_exam_state">查看答题状况</Button>
            </div>
            <div class="t1" v-if="currentProblems.type===1">
                <div class="details p-1">
                    <p class="my-2">{{currentProblems.title}}</p>
                    <RadioGroup >
                        <Radio border label="1">正确</Radio>
                        <Radio border label="2">错误</Radio>
                    </RadioGroup>
                </div>
            </div>
            <div class="t2" v-if="currentProblems.type===2">
                <div class="details p-1">
                    <div class="my-2">
                        <span v-for="(val,index) in currentProblems.title" :key="index">
                            {{val}}
                            <Input class="w-100 mx-1" v-if="index!==currentProblems.title.length-1"></Input>
                        </span>
                    </div>
                </div>
    
            </div>
            <div class="t3" v-if="currentProblems.type===3">
                <div class="details p-1">
                    <p class="my-2">{{currentProblems.title}}</p>
                    <RadioGroup vertical v-if="currentProblems.typeName==='单选'">
                        <Radio  :label="val.index" v-for="val in currentProblems.option" :key="val.index">{{val.text}}</Radio>
                    </RadioGroup>
                    <CheckboxGroup v-else >
                        <Checkbox class="d-block mb-1" :label="val.index" v-for="val in currentProblems.option" :key="val.index">{{val.text}}</Checkbox>
                    </CheckboxGroup>
                </div>
            </div>
            <div class="t4" v-if="currentProblems.type===4">
                <div class="details p-1">
                    <p class="my-2">{{currentProblems.title}}</p>
                    <Input type="textarea" style="width:700px" :autosize="{minRows: 5}" placeholder="请输入答题内容" />
                </div>
            </div>
            <div class="my-2 p-1" v-if="currentProblems.file_list.length">
                <span class="mr-1">附件列表：</span>
                <download-list :file_list="currentProblems.file_list"/>
            </div>
            <div class="my-2 ml-1">
                <Button type="primary" @click="next_problems()">下一题</Button>
            </div>
            <div class="step mt-2 p-1">
                <ul>
                    <li class="float-left mr-2" @click="next_problems(index)" v-for="(val,index) in this.questions_list" :key="index" :class="{active:currentIndex==index}">{{index+1}}</li>
                </ul>
            </div>
            
        </div>
        <Modal v-model="examStateShow" scrollable class="diy-modal" width="910" title="查看答题状况" >
            <div class="filters d-flex between">
                <label >
                    <span>班级:</span>
                    <Select class="w150 mr-1" v-model="currentClass" @on-change="open_exam_state">
                        <Option v-for="(val,index) in classList" :value="val.id" :key="index">{{val.name}}班</Option>
                    </Select>
                    <span v-show="currentClass">共{{examStateData.static.class_student_num}}人，平均成绩90分</span>
                </label>
                <p class="remind-text font-12" v-show="jumped_num">有{{jumped_num}}名学员跳过主观题，请点击闪动的题目</p>
            </div>
            <p class="font-16 text-center mt-3" v-show="!currentClass">请先选择当前班级</p>
            <div class="problems-list p-1 clearfix ">
                <div class="item mb-1 border-radius pointer" @click="examStateShow=false;answerListShow=true;answerListIndex=index;get_answerList()" :class="{skip:val.type===4 && val.jumped_num}" v-for="(val,index) in examStateData.exam_questions" :key="val.id">
                    <h4 class="color-fff px-1 line-height-36" :class="`background-t${val.type}`">{{`第${index+1}题 ${typeNames[val.type-1]} (${val.score}分)`}}</h4>
                    <div class="p-1 border">
                        <div>
                            <Icon custom="iconfont icon-edit" :class="`color-t${val.type}`" /><span>已作答</span> {{val.answered}}人
                        </div>
                        <div>
                            <Icon custom="iconfont icon-success" :class="`color-t${val.type}`"/><span>答对</span> {{val.answered_right}}人
                        </div>
                        <div>
                            <Icon custom="iconfont icon-percent" :class="`color-t${val.type}`"/><span>正确率</span> 
                            <Progress class="progress" :percent="val.accuracy"  text-inside :stroke-width="18"/>
                        </div>
                    </div>
                </div>
            </div>
           
            <div class="not-submit" v-if="currentClass" >
                <h4 class="line-height-36 pointer" @click="notSubmitShow=!notSubmitShow">暂未交卷的学生<Icon size="18" :type="notSubmitShow?'ios-arrow-down':'ios-arrow-up'" /></h4>
                <div v-if="notSubmitShow">
                    <div class="list border border-radius p-1 d-flex wrap" v-if="not_submit_list.length">
                        <p class="border" :class="'sex'+val.sex" v-for="val in not_submit_list" :key="val.id">{{`${val.name}（${val.no}）`}}</p>
                    </div>
                    <p class="my-2 text-center" v-if="empty_not_submit">已全部交卷</p>
                </div>
            </div>
        </Modal>
        <Modal v-model="answerListShow" scrollable class="diy-modal"  @on-cancel="examStateShow=true" :title="`第${answerListIndex+1}题已提交学员`" width="800" :footer-hide="true">
            <p class="color-666 line-height-36 font-12">
                <span v-show="currentAnswerType==4"><Icon type="ios-skip-forward" class="color-t3" style="font-weight: bold"/>
                图标代表学员跳过此题,需老师打分才能交卷,请点击该图标打分,只有论述题可跳过。</span>
                目前本班共{{currentAnswerStudentList.length}}人作答。
            </p>
            <div class="d-flex around p-1 border-radius answerList wrap" >
                <div class="item mb-1 border border-radius line-height-26 d-flex between pr-1" @click="val.right==-1&&set_student_score(val)" :class="'sex'+val.student.sex" v-for="val in currentAnswerStudentList" :key="val.id" >
                    <span>{{`${val.student.name}（${val.student.no}）`}}</span>
                    <Icon :type=" ['ios-skip-forward','ios-close-circle-outline','ios-checkmark-circle-outline'][val.right+1] " :class="`color-t${[3,4,2][val.right+1]}`"/>
                </div>
            </div>
        </Modal> 
    </div>
</template>
<script>
    import {deep_clone} from "@/common/tool"
    import {store} from "@/store"
    import {lesson_answer,lesson_view,lesson_answer_detail,set_answer_score,un_answer_question_students} from "@/common/tapi"
    const intervalTime=3000
    export default {
        data(){
            return {
                empty_not_submit:false, // 没有全部交卷
                not_submit_list:[],
                notSubmitShow:false,
                questions_list:[],
                currentAnswerType:0,
                answerListShow:false,
                answerListIndex:0,
                typeNames:["判断",'填空/计算','选择','论述'],
                examStateShow:false,
                examStateData:{
                    static:{},
                    exam_questions:{}
                },
                content:{
                    file_list:[],
                },
                currentIndex:-1,
                currentClass:0,
                currentAnswerStudentList:[],
                currentProblems:{
                    type:1,
                    typeName:''
                },
                jumped_num:0,
                examStateShowTimer:null,
                answerListShowTimer:null,
                notSubmitShowTimer:null
            }
        },
        methods:{
            set_student_score(val){
                this.answerListShow=false
                let score=''
                this.$Modal.confirm({
                    render: (h) => {
                        return h('div',[
                            h('h3',{class:'mb-3'},`设定${val.student.name}同学的主观题得分`),
                            h('InputNumber',{
                                on:{
                                    input:(value)=>{
                                        score=value
                                    }
                                }
                            })
                        ])
                    },
                    onOk:()=>{
                        set_answer_score({
                            answer_id:val.id,
                            score
                        })
                        .then(res=>{
                            if(res){
                                this.jumped_num--
                                this.answerListShow=true
                                this.$set(val,'right',+score?1:0)
                            }
                        })
                        
                    },
                    onCancel:()=>{
                        this.answerListShow=true
                    }
                })
            },
            get_answerList(){
                lesson_answer_detail({
                    cid:this.currentClass,
                    qid:this.questions_list[this.answerListIndex].id
                }).then(res=>{
                    if(res){
                        this.currentAnswerStudentList=res.data.answers
                        this.currentAnswerType=this.questions_list[this.answerListIndex].type
                    }
                })
                
            },
            open_exam_state(){
                if(this.currentClass){
                    lesson_answer({
                        cid:this.currentClass,
                        lid:this.$route.query.lid
                    })
                    .then(res=>{
                        if(res){
                            this.examStateData=res.data
                            this.jumped_num=res.data.exam_questions.reduce((prev,cur)=>cur.jumped_num+prev,0)
                        }
                    })
                }
            },
            process(val){
                val.typeName=this.typeNames[val.type-1]
                if(val.type===2)
                    val.title=val.title.split('(####)')
                if(val.type===3)
                    val.typeName=val.answer.includes(',')?'多选':'单选'
                this.currentProblems=val
            },
            next_problems(index=-1){
                if(~index && index<this.questions_list.length){
                    this.currentIndex=index
                }
                else if(index===-1 && this.currentIndex<this.questions_list.length-1){
                    this.currentIndex++
                }else{
                    this.$Notice.info({
                        title: '提示',
                        desc: '已经是最后一题了！'
                    });
                    return 
                }
                this.process(deep_clone(this.questions_list[this.currentIndex]))
            },
            get_not_submit_list(){
                un_answer_question_students({lid:this.$route.query.lid,cid:this.currentClass})
                .then(res=>{
                    if(res){
                        this.not_submit_list=res.data.list
                        this.empty_not_submit=!res.data.list.length
                    }
                })
            }
        },
        computed:{
            classList(){
                return store.classList
            }
        },
        watch:{
            examStateShow(){
                if(this.examStateShow)
                    this.examStateShowTimer=setInterval(this.open_exam_state,intervalTime)
                else{
                    clearInterval(this.examStateShowTimer)
                    this.notSubmitShow=false
                }
                
            },
            answerListShow(){
                if(this.answerListShow)
                    this.answerListShowTimer=setInterval(this.get_answerList,intervalTime)
                else
                    clearInterval(this.answerListShowTimer)
            },
            notSubmitShow(){
                if(this.notSubmitShow)
                    this.notSubmitShowTimer=setInterval(this.get_not_submit_list,intervalTime)
                else
                    clearInterval(this.notSubmitShowTimer)
            },
            empty_not_submit(){
                if(this.empty_not_submit){
                    clearInterval(this.notSubmitShowTimer)
                }
            }
        },
        created(){
            lesson_view({lid:this.$route.query.lid})
            .then(res=>{
                if(res){
                    this.content=res.data.lesson
                    this.questions_list=res.data.question
                }
            })
            this.$ipcRenderer.send('active_topic')
        },
        beforeDestroy(){
            //发送销毁http服务
            this.$ipcRenderer.removeAllListeners(['active_topic_reply'])
        },
        mounted(){
            this.$ipcRenderer.on('active_topic_reply',(event,data)=>{
                const index=this.questions_list.findIndex(el=>el.no==data)
                if(~index){
                    this.next_problems(index)
                    this.$ipcRenderer.send('focus_main')
                }
                
            })
        }
    }
</script>